<template>
  <div class="alarmQuantity">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="车牌号码">
          <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请输入车牌号码" clearable/>
        </FormItem>
        <FormItem label="经营类型">
          <i-input v-model="formDataSearch.vehicleTransportName" placeholder="请输入经营类型" clearable/>
        </FormItem>
        <FormItem label="经营企业">
          <i-input v-model="formDataSearch.deptName" placeholder="请输入经营企业" clearable/>
        </FormItem>
        <FormItem label="区县名称">
          <i-input v-model="formDataSearch.countyName" placeholder="请输入区县名称" clearable/>
        </FormItem>
        <FormItem label="乡镇名称">
          <i-input v-model="formDataSearch.townsName" placeholder="请输入乡镇名称" clearable/>
        </FormItem>
        <FormItem label="数据合格率">
          ≤
          <i-input v-model="formDataSearch.operateQualifiedRate" placeholder="" clearable style="width:100px;margin-left: 6px"/>
        </FormItem>
        <FormItem label="汇总日期">
          <DatePicker type="daterange" v-model="formDataSearch.datarange" format="yyyy-MM-dd" placement="bottom-end" placeholder="请选择汇总日期"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
        <Button type="primary" @click="exportData" style="position: relative;top: -8px;">导出</Button>
      </template>
      <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
    </Card>
  </div>
</template>
<script setup>


import {inject, onMounted, reactive, ref, resolveComponent} from 'vue'
import xdTable from '@/components/table/index.vue'
import {systemDictList} from "../../../util/commonInterfaces";

const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件

// 搜索
const formDataSearch = reactive({
  datarange:[$common.timeFormatting(new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),$common.timeFormatting(new Date(), 'yyyy-MM-dd')],
  operateStartDate: $common.timeFormatting(new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),
  operateEndDate: `${$common.timeFormatting(new Date(), 'yyyy-MM-dd')}`,
  operateState: 1,
  operateQualifiedRate: 100,
})

// 列表数据
// 用于获取$refs
const xdTableRef = ref();
const tableData = reactive({
  url: apiUrl.supervisoryCollectOperateVehiclePageList,//请求地址
  method: 'post',//请求方式
  where: {
    operateStartDate: $common.timeFormatting(new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24), 'yyyy-MM-dd'),
    operateEndDate: `${$common.timeFormatting(new Date(), 'yyyy-MM-dd')}`,
    operateState: 1,
    operateQualifiedRate: 100,
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '车牌号', minWidth: 120, key: 'vehiclePlateNo', tooltip: true,},
    { title: '车牌颜色', minWidth: 120, key: 'vehiclePlateColor', tooltip: true, render: (h, params) => {
        if (params.row.vehiclePlateColor == 1) {//蓝色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'primary'}, '蓝色');
        } else if (params.row.vehiclePlateColor == 2) {//黄色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'warning'}, '黄色');
        } else if (params.row.vehiclePlateColor == 5) {//绿色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '绿色');
        } else if (params.row.vehiclePlateColor == 95) {//黄绿色
          return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '黄绿色');
        } else {//其他
          return h(resolveComponent('Tag'), {type: 'dot', color: 'error'}, '其他');
        }
      }
    },
    {title: '车架号', minWidth: 200, key: 'vehicleFrameNo', tooltip: true,},
    {title: '联系人', minWidth: 200, key: 'vehicleContactsName', tooltip: true,},
    {title: '联系人电话', minWidth: 120, key: 'vehicleContactsPhone', tooltip: true,},
    // {title: '经度不合格', minWidth: 100, key: 'operateQualifiedLonCount', tooltip: true,render: (h, params) => {
    //     return h('span', {}, `${params.row.operateQualifiedLonCount}个`)
    //   }},
    // {title: '纬度不合格', minWidth: 100, key: 'operateQualifiedLatCount', tooltip: true,render: (h, params) => {
    //     return h('span', {}, `${params.row.operateQualifiedLatCount}个`)
    //   }},
    // {title: '海拔不合格', minWidth: 100, key: 'operateQualifiedAltCount', tooltip: true,render: (h, params) => {
    //     return h('span', {}, `${params.row.operateQualifiedAltCount}个`)
    //   }},
    // {title: '速度不合格', minWidth: 100, key: 'operateQualifiedSpeCount', tooltip: true,render: (h, params) => {
    //     return h('span', {}, `${params.row.operateQualifiedSpeCount}个`)
    //   }},
    // {title: '方向不合格', minWidth: 100, key: 'operateQualifiedDirCount', tooltip: true,render: (h, params) => {
    //     return h('span', {}, `${params.row.operateQualifiedDirCount}个`)
    //   }},
    // {title: '时间不合格', minWidth: 100, key: 'operateQualifiedTimeCount', tooltip: true,render: (h, params) => {
    //     return h('span', {}, `${params.row.operateQualifiedTimeCount}个`)
    //   }},
    {title: '定位点总数', minWidth: 100, key: 'operatePositionCount', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.operatePositionCount} 个`)
      }},
    {title: '合格定位点', minWidth: 100, key: 'operateQualifiedCount', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.operateQualifiedCount} 个`)
      }},
    {title: '不合格定位点', minWidth: 120, key: 'operateQualifiedErrorCount', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.operateQualifiedErrorCount} 个`)
      }},

    {title: '数据合格率', minWidth: 100, key: 'operateQualifiedRate', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.operateQualifiedRate} %`)
      }},
    {title: '经营企业', minWidth: 220, key: 'companyName', tooltip: true,},
    {title: '经营类型', minWidth: 120, key: 'vehicleTransportName', tooltip: true,},
    {title: '地市名称', minWidth: 120, key: 'cityName', tooltip: true,},
    {title: '区县名称', minWidth: 120, key: 'countyName', tooltip: true,},
    {title: '乡镇名称', minWidth: 120, key: 'townsName', tooltip: true,},
    {title: '汇总日期', minWidth: 120, key: 'operateDate', tooltip: true,}
  ],
  pagingParameters: {// 分页参数
    page: 'pageNo',
    limit: 'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})

const state = reactive({
  carPlateColor: [
    {codeNumber: 1, color: 'primary', desc: '蓝色'},
    {codeNumber: 2, color: 'warning', desc: '黄色'},
    {codeNumber: 3, color: 'black', desc: '黑色'},
    {codeNumber: 4, color: ' ', desc: '白色'},
    {codeNumber: 5, color: 'success', desc: '绿色'},
    {codeNumber: 93, color: '#87d068', desc: '黄绿色'},
    {codeNumber: 9, color: 'cyan', desc: '其他'}
  ],//车辆颜色
  personTypeList: [],//从业类型
  selectData: {},//选中数据
  formOperation: false,//弹框状态
  formTitle: '',//弹框标题
  formData: {
    username: 'gtjt_llb',
    password: 'sersllb123',
  },//表单数据
});

onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
})

//搜索方法
const searchSubmit = () => {
  let data = Object.assign({},formDataSearch);
  if (!!data.datarange[0]){
    console.log(data.datarange,'data.datarange')
    data.operateStartDate = $common.timeFormatting(new Date(data.datarange[0]))
    data.operateEndDate = $common.timeFormatting(new Date(data.datarange[1]))
  }
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}

/**
 * 导出数据
 */
const exportData = () => {
  let msg = $ViewUIPlus.Message.loading({
    content: '导出中...',
    duration: 0
  });
  $axios.post(apiUrl.supervisoryCollectOperateVehicleExport,formDataSearch).then((res) => {
    msg()
    if (!!res) {
      window.open(`${apiUrl.imgUrl}${res.data.data}`)
    }
  }).catch((err) => {
    msg()
  })
}
</script>

<style lang="less">
.alarmQuantity {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 41px);
  }
}
</style>
